<template>
	<view class="weather-page">
		<view v-if="isLoading">加载中...</view>
		<view v-else-if="weatherData">
			<view>城市：{{ weatherData.cityInfo.city }}</view>
			<view>温度：{{ weatherData.data.wendu }}°</view>
			<view>天气：{{ weatherData.data.forecast[0].type }}</view>
			<view>风向：{{ weatherData.data.forecast[0].fx }}</view>
			<view>风力：{{ weatherData.data.forecast[0].fl }}</view>
			<view>湿度：{{ weatherData.data.shidu }}</view>
			<button @click="refreshWeather">刷新天气</button>
		</view>
		<!-- 错误提示 -->
		<view v-else>
			<view>天气获取失败</view>
			<button @click="refreshWeather">重试</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				weatherData: null
			}
		},
		onLoad() {
			this.fetchWeather();
		},
		methods: {
			fetchWeather() {
				this.isLoading = true;
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data.status === 200) {
							this.weatherData = res.data;
						} else {
							this.weatherData = null;
						}
					},
					fail: () => {
						this.weatherData = null;
					},
					complete: () => {
						this.isLoading = false;
					}
				});
			},
			refreshWeather() {
				this.fetchWeather();
			}
		}
	}
</script>

<style scoped>
.weather-page {
	padding: 20rpx;
}
view, button {
	margin: 10rpx 0;
}
button {
	padding: 10rpx;
}
</style>